import {Callout} from "nextra/components";
import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Bottom Navigation Bar

A bottom navigation bar is usually present at the bottom of root pages.
It is used to navigate between a small number of views, typically between three and five.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.bottom_navigation_bar/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='bottom-navigation-bar' query={{}}/>
    </Tabs.Tab>
    <Tabs.Tab>
      ```dart copy
      class Application extends StatefulWidget {
        const Application({super.key});

        @override
        State<Application> createState() => _ApplicationState();
      }

      class _ApplicationState extends State<Application> {
        int index = 1;

        @override
        Widget build(BuildContext context) => FBottomNavigationBar(
              index: index,
              onChange: (index) => setState(() => this.index = index),
              children: [
                FBottomNavigationBarItem(
                  icon: Icon(FIcons.house),
                  label: const Text('Home'),
                ),
                FBottomNavigationBarItem(
                  icon: Icon(FIcons.layoutGrid),
                  label: const Text('Browse'),
                ),
                FBottomNavigationBarItem(
                  icon: Icon(FIcons.radio),
                  label: const Text('Radio'),
                ),
                FBottomNavigationBarItem(
                  icon: Icon(FIcons.libraryBig),
                  label: const Text('Library'),
                ),
                FBottomNavigationBarItem(
                  icon: Icon(FIcons.search),
                  label: const Text('Search'),
                ),
              ],
            );
      }
      ```
    </Tabs.Tab>

</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create bottom-navigation-bar
```

## Usage

<Callout type="info">
    A bottom navigation bar is typically used with `FScaffold`. A working example can be found [here](/docs/layout/scaffold).
</Callout>

### `FBottomNavigationBar(...)`

```dart copy
FBottomNavigationBar(
  style: FBottomNavigationBarStyle(...),
  index: 0,
  onChange: (index) => {},
  children: [
    FBottomNavigationBarItem(
      icon: Icon(FIcons.house),
      label: const Text('Home'),
      autofocus: false,
      focusNode: FocusNode(),
      onFocusChange: (focused) {},
      onHoverChange: (hovered) {},
      onStateChange: (delta) {},
    ),
  ],
);
```
